<template>
	<view class="merchant-page">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<view slot="top">
				<view class="merchant-top" v-if="merchantDetail">
					<image :src="merchantDetail.image" class="merchant-image"></image>
					<view class="merchant-name">{{merchantDetail.name}}</view>
					<view class="merchant-description">{{merchantDetail.description}}</view>
					<view class="merchant-info">
						<view class="info-item">
							<image src="../../static/merchant/icon_time.png" class="image"></image>
							<view>营业时间：08:00～20:00</view>
						</view>
						<view class="info-item">
							<image src="../../static/merchant/icon_phone.png" class="image"></image>
							<view>商家电话：{{merchantDetail.phone}}</view>
						</view>
						<view class="info-item">
							<image src="../../static/merchant/icon_address.png" class="image"></image>
							<view>商家地址：{{merchantDetail.address}}</view>
						</view>
					</view>
				</view>
				<view class="tab-list">
					<view :class="tabsIndex==index?'tab-item active':'tab-item'" v-for="(item,index) in tabsList"
						:key="index" @click="tabsChange(index)">{{item.name}}</view>
				</view>
			</view>
			<view class="goods-list" v-if="tabsIndex==0||tabsIndex==1">
				<view class="goods-item" v-for="(item,index) in dataList" :key="index">
					<image :src="item.image" class="item-left"></image>
					<view class="item-center">
						<view class="item-title">{{item.name}}</view>
						<view class="item-time">已售:{{item.sales}}</view>
						<view class="item-price"><text class="unit">￥</text> {{item.price}}</view>
					</view>
					<view class="item-right">
						<view class="button button1" v-if="tabsIndex==0"
							@click="$Tips('/pages/courses/coursesDetail?courses_id='+item.id)">
							购买
						</view>
						<view class="button button1" v-if="tabsIndex==1"
							@click="$Tips('/pages/shop/goodsDetail?goods_id='+item.id)">
							购买
						</view>
					</view>
				</view>
			</view>
			<view class="card-list" v-if="tabsIndex==2">
				<view class="card-item" v-for="(item,index) in dataList" :key="index"
					@click="$Tips('/pages/merchant/couponDetail?coupon_id='+item.id+'&page=receive')">
					<view class="item-left active">
						<view class="coupon-top">此商家可用</view>
						<view class="coupon-money">
							<text class=" coupon-unit">¥</text>{{item.number}}
						</view>
						<view class="coupon-rule" v-if="item.money!=0">满{{item.money}}可用</view>
						<view class="coupon-rule" v-else>无门槛</view>
					</view>
					<view class="item-center">
						<view class="item-title">{{item.name}}</view>
						<view class="item-type">到期时间:{{item.endtime}}</view>
						<view class="item-time">使用说明:{{item.content}}</view>
					</view>
					<view class="item-right ">
						<view class="button">领取</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabsList: [{
					name: '课程列表',
					status: '1',
				}, {
					name: '商品列表',
					status: '2',
				}, {
					name: '优惠券',
					status: '3',
				}],
				tabsIndex: 0,
				merchant_id: null,
				merchantDetail: null,
				dataList: []
			}
		},
		onLoad(options) {
			if (options && options.id) {
				this.merchant_id = options.id
				this.getMerchantDetail()
			}
		},
		methods: {
			getMerchantDetail() {
				this.$Api.userMerchant.getMerchantDetail({
					merchant_id: this.merchant_id,
				}).then((res) => {
					this.merchantDetail = res.data;
				});
			},
			tabsChange(index) {
				this.dataList = []
				this.tabsIndex = index
				this.refreshList()
			},
			refreshList() {
				this.$refs.paging.scrollToTop()
				this.$refs.paging.refresh();
			},
			queryList(pageNo) {
				switch (this.tabsIndex) {
					case 0:
						this.fetchData(this.$Api.userMerchant.merchantCourseList, pageNo);
						break;
					case 1:
						this.fetchData(this.$Api.userMerchant.merchantGoodsList, pageNo);
						break;
					case 2:
						this.fetchData(this.$Api.userMerchant.getCouponList, pageNo);
						break;
					default:
						// 可以添加默认处理逻辑，或者不做任何操作
						break;
				}
			},
			fetchData(apiMethod, pageNo) {
				apiMethod({
					page: pageNo,
					merchant_id: this.merchant_id
				}).then(res => {
					this.$refs.paging.complete(res.data.data);
				}).catch(res => {
					this.$refs.paging.complete(false);
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.merchant-page {
		width: 100%;
		min-height: 100vh;
		background: #F6F6F8;

		.merchant-top {
			background: linear-gradient(to bottom, #E4F69C 0%, #ffffff 30%);
			position: relative;
			margin: 96rpx 30rpx 0;
			padding: 22rpx;
			border-radius: 20rpx;

			.merchant-image {
				position: relative;
				width: 116rpx;
				height: 116rpx;
				margin-top: -58rpx;
				left: 50%;
				transform: translateX(-50%);
				border-radius: 50%;
				border: 4rpx solid #E4F69C;
			}

			.merchant-name {
				text-align: center;
				font-size: 32rpx;
				color: #000000;
				font-weight: bold;
				margin-top: 22rpx;
				margin-bottom: 16rpx;
			}

			.merchant-description {
				font-size: 26rpx;
				color: #565656;
			}

			.merchant-info {
				padding: 16rpx 0rpx;

				.info-item {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					color: #565656;
					padding: 10rpx 0;

					.image {
						width: 28rpx;
						height: 28rpx;
						margin-right: 8rpx;
					}
				}
			}
		}

		.tab-list {
			min-height: 86rpx;
			margin: 20rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.tab-item {
				text-align: center;
				width: 216rpx;
				height: 88rpx;
				line-height: 88rpx;
				box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
				border-radius: 200rpx;
				font-weight: bold;
				font-size: 32rpx;
			}

			.active {
				background: #A3C616;
				color: #ffffff;
			}
		}

		.goods-list {
			margin: 20rpx 30rpx;
			background-color: #F7F8FA;

			.goods-item {
				margin: 0 30rpx 20rpx;
				border-radius: 28rpx;
				padding: 20rpx;
				display: flex;
				align-items: center;
				background: #ffffff;
				box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.1), inset 0rpx 2rpx 2rpx 0rpx #FFFFFF;

				.item-left {
					width: 156rpx;
					height: 156rpx;
					margin-right: 26rpx;
				}

				.item-center {
					flex: 1;
					min-height: 156rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.item-title {
						font-weight: bold;
						font-size: 32rpx;
					}

					.item-time {
						font-size: 26rpx;
						color: #565656;
						margin-top: 6rpx;


					}

					.item-price {
						font-weight: bold;
						font-size: 40rpx;
						color: #FD463E;
						margin-top: 16rpx;

						.unit {
							font-size: 28rpx;
						}
					}
				}

				.item-right {
					height: 156rpx;
					display: flex;
					flex-direction: column;
					justify-content: flex-end;

					.button {
						width: 112rpx;
						height: 56rpx;
						line-height: 56rpx;
						text-align: center;
						border-radius: 44rpx;
					}

					.button1 {
						color: #ffffff;
						background: linear-gradient(90deg, #C1ED1F 0%, #A3C616 100%);
						box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(162, 198, 22, 0.3);
					}
				}
			}
		}

		.card-list {
			margin: 20rpx 30rpx;

			.card-item {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				box-sizing: border-box;
				box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.1), inset 0rpx 2rpx 2rpx 0rpx #FFFFFF;
				border-radius: 28rpx;
				background: #ffffff;


				.item-left {
					width: 180rpx;
					height: 228rpx;
					margin-right: 20rpx;
					background-color: #d6d6d6;
					color: #FFFFFF;

					.coupon-top {
						font-weight: 400;
						font-size: 14px;
						line-height: 21px;
						text-align: center;
						padding: 10rpx 0;
						background: linear-gradient(90deg, #FFE2E2 0%, #FFF3F3 100%);
						border-radius: 14px 0px 0px 0px;
					}

					.coupon-money {
						font-weight: bold;
						font-size: 26px;
						line-height: 39px;
						text-align: center;
						margin-top: 12rpx;

						.coupon-unit {
							font-weight: bold;
							font-size: 26rpx;
							text-align: center;
						}
					}

					.coupon-rule {
						margin-top: 12rpx;
						font-weight: 400;
						font-size: 14px;
						line-height: 21px;
						text-align: center;
					}
				}

				.active {
					background-color: #fff3f3;
					color: #FF1E00;
				}

				.item-center {
					flex: 1;
					height: 228rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;

					.item-title {
						font-weight: bold;
						font-size: 32rpx;
					}

					.item-type {
						font-size: 26rpx;
						color: #565656;
						margin-top: 16rpx;
					}

					.item-time {
						width: 270rpx;
						font-size: 26rpx;
						color: #565656;
						margin-top: 16rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				.item-right {
					margin-right: 20rpx;

					.button {
						width: 112rpx;
						height: 52rpx;
						background: linear-gradient(270deg, #FE4369 0%, #FE746D 100%);
						border-radius: 100rpx;
						font-size: 24rpx;
						color: #FFFFFF;
						text-align: center;
						line-height: 52rpx;
					}
				}
			}
		}
	}
</style>